// webpack.config.js
const isDev = process.env.NODE_ENV === 'development';
const webpack = require('webpack');
const path = require('path');
// 抽离css为单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const setEntry = require('./utils/setEntry.js');
const setHtml = require('./utils/setHtml.js');
const setServer = require('./utils/setServer.js');

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
	mode: isDev ? 'development': 'production',
	entry: setEntry(),
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'public/js/[name].[hash:6].js',
		publicPath: '/'	//通常是CDN地址
	},
	module: {
		rules: [
			{
				test: /\.vue$/,
				use: ['vue-loader']
			},
			{
				test: /\.jsx?$/,
				use: ['babel-loader'],
				exclude: /node_modules/	//排除node_modules文件夹
			},
			{
				test: /\.(le|sc|c)ss$/,
				use: [ {
					loader: MiniCssExtractPlugin.loader,
					options: {
						publicPath: '../../' //这个option必须写，否则css中图片路径可能会出错
					}
					
				},'css-loader', {
					loader: 'postcss-loader',
					options: {
						
						plugins: function(){
							return [
								require('autoprefixer')({
                                        "overrideBrowserslist": [
                                            "defaults"
                                        ]
                                    })
							]
						}
					}
				}, 'less-loader', 'sass-loader'],
				exclude: /node_modules/
			},
			{
				test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
				use: [
					{
						loader: 'url-loader',
						options: {
							limit: 10240,	//10k
							esModule: false,
							name: '[name]_[hash:6].[ext]',
							outputPath: 'public/images/'
							// publicPath: isDev? '' : path.posix.join('./', 'public/images/')
						}
					}
				]
			}
		]
	},
	resolve: {
	  extensions: ['.js', '.vue', '.json'],
	  alias: {
	    'vue$': 'vue/dist/vue.esm.js',
	    '@': resolve('src'),
	  }
	},
	devServer: setServer(),
	plugins: [
		new VueLoaderPlugin(),
		new MiniCssExtractPlugin({
			filename: 'public/css/[name][hash:6].css',
			//publicPath: '../images',	//如果你的output的publicPath配置的是'./'这种相对路径，那么如果将css文件放在单独目录下，记得在这里指定一下publicPath 
		}),
	].concat(setHtml())
}
